雖然昨天很低落，但我們要記得 Props 是唯讀的！（我有寫喔！）

但我們要做的網頁不是靜態資料（如果是就不用在這學了），所以，React提供了state，它是一個物件的存在，而且可以在 class components 裡增加屬性。

例如：用上我最愛的那個 index.html增加 div#root8 (7我會找時間補完在前一篇）

class Hello3 extends React.Component {
  state = {
    name: "Trista",
    age: 37,
    title: "fool"
  }
  render() {
    return <p>Hello, I'm {this.state.name} and I'm {this.state.age} years old, I feel I like a {this.state.title}.</p>
  }
}
const el5 = <Hello3 />
ReactDOM.render(
  el5,
  document.getElementById('root8')
);

這裡我們用state去定義各種屬性（用 , 來分隔），就可以得到如下的結果：

注意到了嗎，state可以有多個屬性能呼叫。

2021-09-29 update

讓我們用按鈕做點小微調。

class Hello4 extends React.Component {
  state = {
    name: "Trista",
    age: 37,
    title: "fool"
  }
  change = () => {
    this.setState({
      name: "Stzero",
      age: 10,
      title: "boy"
    })
  }
  render() {
    return <p>Hello, I'm {this.state.name} and I'm {this.state.age} years old, I feel I like a {this.state.title}.<br /><button {this.change}>Change Value</botton></p>
  }
}
const el7 = <Hello4 />
ReactDOM.render(
  el7,
  document.getElementById('root10')
);

相關文章：

Component State